<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-control" content="max-age=1700" />

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta name="MobileOptimized" content="320" />
<meta name="format-detection" content="telephone=no" />


<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script> 
<link href="${ctx}/css/wxflow.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/css/fonts/font.css" rel="stylesheet" type="text/css" />

<title>流量购买</title>
<script>
var mobileValidate=false;
var codeValidate=false;
$(function() {
	 $('#mobileNumber').bind('input propertychange', function() {
		 var mobileNumber = $('#mobileNumber').val();
		 mobileValidate=false; 
		 if(mobileNumber.length==11){ 
			 $.ajax({ 
				 url: '${ctx}/isSHCmccMobile',
				 type: 'POST',
				 data: {mobileNumber:mobileNumber} ,
				 cache:false,
				 dataType:'json',  
				 success: function(data){
					 if(data){  
                         $('#mobileNumberMsg').removeClass('error-num').addClass('true-num').text('上海 中国移动');
                         $('#btn').attr("disabled", false); 
                         mobileValidate=true;
					 }else{
						 $('#mobileNumberMsg').removeClass('true-num').addClass('error-num').text('您的号码非上海移动号码');
					 }  
			     },
			     error : function(data) {    
                     console.info(data);
			     }    
			 });
			 
		 }else{
			 $('#mobileNumberMsg').removeClass('true-num').removeClass('error-num').text('');
             $('#btn').attr("disabled", true);
             $("#btn").val("获取验证码").removeAttr("disabled");  
		 }
		
	 }); 
	 $('#btn').click(function () { 
		    var count = 59; 
            $("#btn").attr("disabled", true); 
            $("#btn").val( "重新获取(60)"); 
            reqSmsCode();
		    var countdown = setInterval(CountDown, 1000);
		    function CountDown() { 
			    $("#btn").val("重新获取("+count+")"); 
			    if (count == 0) { 
			        $("#btn").val("获取验证码").removeAttr("disabled"); 
			        clearInterval(countdown); 
			    } 
			      count--; 
			 } 
	 }); 
});
function reqSmsCode(){ 
	$('#smsCodeMsg').removeClass('error-num').removeClass('true-num').text(''); 
	var mobileNumber = $('#mobileNumber').val();
    $.ajax({ 
        url: '${ctx}/requestSHCmccSmsCode',
        type: 'POST',
        data: {mobileNumber:mobileNumber} ,
        cache:false,
        dataType:'json',  
        success: function(data){
        	if(data.result == "0"){
        		codeValidate=true;
        		$('#smsCodeMsg').removeClass('error-num').addClass('true-num').text(data.message); 
        	}
            if(data.result == "1"){
                $('#smsCodeMsg').removeClass('true-num').addClass('error-num').text(data.message); 
            }
        	console.info(data);
        },
        error : function(data) {    
            console.info(data);
        }    
    });
}
function doLogin(){
	var mobileNumber = $('#mobileNumber').val();
	var smsCode = $('#smsCode').val();
	console.info('mobileValidate:'+mobileValidate);
    console.info('codeValidate:'+codeValidate);
    console.info('smsCode:'+smsCode);
    console.info('mobileNumber:'+mobileNumber);
	if(mobileValidate && codeValidate){ 
	    if(smsCode == '' || smsCode == '请输入短信验证码' || smsCode == undefined || smsCode == null){
	        $('#smsCodeMsg').removeClass('true-num').addClass('error-num').text('请输入短信验证码'); 
	        return;
	    }else{
	    	$.ajax({ 
	            url: '${ctx}/doLoginSHCmcc',
	            type: 'POST',
	            data: {mobileNumber:mobileNumber,smsCode:smsCode} ,
	            cache:false,
	            dataType:'json',  
	            success: function(data){
	                if(data.result == "0"){ 
	                    window.location.href="${ctx}/queryResult";
	                }
	                if(data.result == "1"){
	                    $('#smsCodeMsg').removeClass('true-num').addClass('error-num').text(data.message); 
	                }
	                console.info(data);
	            },
	            error : function(data) {    
	                console.info(data);
	            }    
	        });
	    }
	}else{
		if(!mobileValidate){
	        $('#mobileNumberMsg').removeClass('true-num').addClass('error-num').text('手机号有误');
		}else if(!codeValidate){ 
	        $('#smsCodeMsg').removeClass('true-num').addClass('error-num').text('请获取验证码');
		}
		return;
	} 
}
 
</script>
</head>
<body>
    <div class="wrap">
        <div class="phone resize">
            <p id="mobileNumberMsg"></p><p></p>
            <div class="phone-num width100">
                <input  id="mobileNumber" type="text" placeholder="请输入手机号码" maxlength="11" class="input"  autocomplete="off" />
            </div>
        </div>
         <div class="phone check-resize">
            <p id="smsCodeMsg"></p><p></p>
            <div class="phone-num">
                <input id="smsCode" type="text" placeholder="请输入短信验证码" class="input"  autocomplete="off" />
            </div>
             <div class="phone-his"><input type="button" id="btn" value="获取验证码" disabled="disabled"/></div>
        </div>
        <a href="javascript:void(0)" onclick="doLogin();" class="buy">登录</a>
            <div class="instruction">
                <p>上海移动流量查询</p>
                <p>使用范围：目前只支持上海移动</p> 
                <br>
                <p><a href="http://chong.qq.com/mobile/wt_index_v2.shtml#template=ctrl.wx.wt2.login" style="color: #007aff;text-decoration: none;">非上海移动用户可使用微信官方手机营业厅</a></p>
            </div>
    </div>
</body>
</html>




